<template>
  <div class="meIndex">
    <div class="photobanner">
          <span class="setting" ><img class="setup" src="../../assets/images/me-setup.png"></span>
          <div class="img">
            <img class="photo" src="../../assets/images/me-head.jpg">
            <!--meIndex.avatar-->
          </div>
          <div class="name">{{meIndex.firstname}}</div>
          <div class="total clearFix">
              <div class="fl left">
                  <p>310</p>
                  <span>关注</span>
              </div>
              <div class="fl">
                  <p>420</p>
                  <span>粉丝</span>
              </div>
          </div>
    </div>

    <div class="me-box">
        <ul class="list">
          <li class="on" @click = "gotoAddress('/me/MeIndex')">
            主页
          </li>
          <li @click = "gotoAddress('/me/otherShop')">
            商品
          </li>
          <li @click = "gotoAddress('/me/otherArticle')">发表</li>
        </ul>
        <div class="content">
          <div class="list2">
                <p class="clearFix">
                    <span>性别:</span><b>女</b>
                </p>
                <p class="clearFix">
                    <span>年龄:</span><b>24</b>
                </p>
                <p class="clearFix">
                    <span>地区:</span><b>北京市 通州区</b>
                </p>
                <p class="clearFix">
                    <span>女神金币:</span><b>240</b>
                </p>
                <p class="introduce">简介:     </p>
          </div>
        </div>
    </div>




  </div>
</template>

<script>
export default {
  name: 'MeIndex',
  data () {
    return {
      meIndex:{}
    }
  },
     methods: {
       gotoAddress(path){
         this.$router.push(path)
       },
       initData:function(){
         var  ajaxData = {};
         ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;

         var _this=this;
         $.ajax({
           type:'post',
           url: RouteMap.peopleDetail,
           data:ajaxData,
           success:function(res){
             if(res.code == 200){

               _this.meIndex = res.data;

               console.log(res.data)
             }
             else{
               //Toast(res.msg)
             }
           }
         })
       },


     },
  mounted:function () {
    this.initData();

  }




}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.photobanner{ text-align: center; padding-top:1.92rem; padding-bottom: 1.6rem; position: relative; background: #fff;}
.img{padding-bottom:.8rem;}
.photo{ border-radius:50%; width: 3.84rem; height:3.84rem;}
.name{font-size:.683rem;color:#000;padding-bottom:.72rem; font-weight:bold;}
.total{    margin-left: 6.2rem;width:4rem;}
.total p{color:#707070; font-size:.725rem;}
.total span{color:#707070; font-size:.427rem; font-weight:bold;}
.total .left{padding-right:1.36rem;}


.setting{ position: absolute; right: .64rem; top: 1.49rem;}
.setup{width:.756rem;height:.756rem;}


.me-box{
  background:#fff;
}
.list{
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding-bottom:1.064rem;
  color:#b0242a;
}
.list li {
    padding-top:.21rem;

}
.list .on {

    border-top:0.17rem solid #ae2124;

}

.content {
    padding:0 .604rem;


}
.content .list2{
    border-top: 1px solid #ccc;
    padding-bottom:1.19rem;
}

.content p{
  line-height:1.87rem;
  border-bottom:1px solid #ccc;
  padding:0 .149rem;
  font-size:.51rem;
  color:#000;

}
.content p span{float:left;}
.content p b{float:right;}
.content p.introduce{
height:6.28rem;
}
</style>
